<template>

	<scroll-view :class="pageClass" :style="pageStyle" v-if="pageReady">
		<moxi-nav :set="navSet"></moxi-nav>
		<view style="background:#F5F5F5;height: 100%;">
			<view style="padding: 12px 12px 0 12px;">
				<view class="evaorder-top">
					<view>{{merchantname}}</view>
					<view style="display: flex;gap: 12px;padding: 12px 0px;">
						<text style="color: #999999;">评分</text>
						<u-rate :count="count" v-model="score" :minCount="0.5" allowHalf
							:activeColor="colorList[4]"></u-rate>
					</view>
				</view>
			</view>

			<view style="padding: 12px 12px 0 12px;">
				<view class="evaorder-top">
					<u--textarea border="none" v-model="textareaValue" style="padding: 0;" height="100"
						placeholder="亲亲 有什么不好可以告诉我们哦"></u--textarea>
					 <u-upload
					     :fileList="fileList3"
					     @afterRead="afterRead"
					     @delete="deletePic"
					     name="3"
					     multiple
					     :maxCount="10"
					   ></u-upload>
				</view>
			</view>
		</view>

		<view class="checkbox-container">
			<view style="display: flex;width: 100%;padding: 0 12px;justify-content: space-between;">
				<view style="display: flex;align-items: center;">
					<view style="display: flex;align-items: center;"  >
						<!-- #ifndef MP-ALIPAY -->
						<u-checkbox-group v-model="isChecked" @change="toggleCheckbox" >
							<u-checkbox :activeColor="app_color" label="匿名评价" :name="'匿名评价'"></u-checkbox>
						</u-checkbox-group>
						<!-- #endif -->
						<!-- #ifdef MP-ALIPAY -->
						<u-checkbox-group>
							<u-checkbox :activeColor="app_color" label="匿名评价" :value="isChecked"></u-checkbox>
						</u-checkbox-group>
						<!-- #endif -->
					</view>
				</view>
				<view style="width: 128px;height: 40px;">
					<u-button :custom-style="{height: '100%', width: '100%',BorderRadius: '20px'}" :color="colorList[4]"
						@click="subEva">提交评价</u-button>
				</view>
				
			</view>
		</view>

		<moxi-tabbar :set="tabbar" v-if="tabbar.index_id"></moxi-tabbar>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				count: 5,
				score: 0,
				textareaValue: '',
				fileList3: [],
				isChecked: [],
				merchantname:'',
				orderdata:'',
				content:[],
				c:0,
				annouse:0,
				evaImg:[]
			}
		},
		onLoad(option){
			var orderid = option.orderid;
			// console.log(orderid);
			this.getOrderInfo(orderid);
			this.getOrderData(orderid);
		},
		methods: {
			getOrderInfo(orderid){
				this.moxiPost(
				'/plugin/order/user/user/evaindex',{'orderid':orderid},(res)=>{this.merchantname = res.data.name;}
				);
			},
			getOrderData(orderid){
				this.moxiPost('/plugin/order/user/user/orderinfo',{'orderid':orderid},(res)=>{this.orderdata = res.data;})
			},
			myEva(){
				this.moxiPost(
				'/plugin/order/user/user/getmyeva',(res)=>{console.log(res.data)}
				);
			},
			subEva() {
				if(this.isChecked[0] === '匿名评价'){
					this.annouse = 1
				}else{
					this.annouse = 0
				}
				
				const contentData = {
					'content':this.textareaValue,
					'img':this.evaImg,
					'scope':this.score
				}
				
				this.moxiPost('/plugin/order/user/user/ordereva',{
					'orderid':this.orderdata.orderdata.order_id,
					'content':JSON.stringify(contentData),
					'anmsstatus':this.annouse
					},
					(res)=>{console.log(res)});
				uni.showToast({
					title: '评价成功',
					icon: 'success',
					duration: 2000
				});
				// return false
				//这里应该跳转到我的评价
				setTimeout(() => {
					uni.redirectTo({
						url: '/plugin_order/order'
					});
					setTimeout(() => {
						uni.hideToast();
					}, 500);
				}, 1000);
			},
			toggleCheckbox(values) {
				  if(values[0] === '匿名评价'){
					  // console.log(values[0]);
					  this.isChecked = 1
				  }else{
					  this.isChecked = 0
				  }
				console.log("当前选中状态值:", this.isChecked);
			    },
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},

			async afterRead(event) {
				console.log(event);
			        // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			        let lists = [].concat(event.file);
			        let fileListLen = this[`fileList${event.name}`].length;
			        lists.map((item) => {
			          this[`fileList${event.name}`].push({
			            ...item,
			            status: "uploading",
			            message: "上传中",
			          });
			        });
			        for (let i = 0; i < lists.length; i++) {
			          const result = await this.moxiUpload(lists[i].url,(data)=>{
						  //添加每一个图片
						  this.evaImg.push(data)
					  });
					  
					  
			          let item = this[`fileList${event.name}`][fileListLen];
			          this[`fileList${event.name}`].splice(
			            fileListLen,
			            1,
			            Object.assign(item, {
			              status: "success",
			              message: "",
			              url: result,
			            })
			          );
			          fileListLen++;
			        }
			      },
		
		}
	}
</script>

<style scoped>
	.checkbox-container {
		background: #ffffff;
		display: flex;
		align-items: center;
		padding: 16px 0px;
		justify-content: space-between;
		position: sticky;
		bottom: 0;
		position: absolute;
		width: 100%;
	}

	.evaorder-top {
		background: #FFFFFF;
		border-radius: 12px;
		box-sizing: border-box;
		padding: 12px;
		font-size: 14px;
	}

	/* 选中状态的背景圆角 */
	/deep/ .u-checkbox__icon-wrap--checked {
		border-radius: 22px !important;
	}

	/* 未选中状态的边框圆角 */
	/deep/ .u-checkbox__icon-wrap {
		border-radius: 22px !important;
	}
</style>